<template>
	<view>
		<!-- 导航栏 -->
		<navBar bgColor="#FFF">
			<image :slot="'left'"
				@click="navToBack"
				:src="xcxImgUrl && xcxImgUrl+'fanhui.svg'"
				style="width: 36rpx;height: 36rpx;"></image>
			<text :slot="'content'">往来对账</text>
		</navBar>
		<!-- 搜索栏 -->
		<view style="background-color: #FFF;">
			<search :isLinks='false'
				@searchBlur='searchBlur'
				@nativeInput="nativeInput"
				bgColor="#F5F5F5">
			</search>
		</view>

		<view class="mian_currentAccount_top pd10">
			<view class="mian_currentAccount_top_l">
				往来余额：{{finalbalance}}
			</view>
			<view @click="selectTime"
				class="mian_currentAccount_top_r">
				{{time ? time : '日期选择'}}
				<image :src="xcxImgUrl && xcxImgUrl+'page_public/static/duizhangriqixuanze.svg'"></image>
			</view>
		</view>

		<scroll-view :style="{'height': 'calc(100vh - ' + demoTopHieght +')'}"
			scroll-y
			@scrolltolower="scrolltolower"
			class="main_currentAccount">

			<view v-for="(item,index) in accountList"
				:key="item.billId"
				class="main_currentAccount_item pd10">
				<view class="main_currentAccount_item_top">
					<image class="mr10"
						:src="xcxImgUrl && xcxImgUrl+'page_public/static/wanglaiduizhang.svg'"></image>
					<text>
						{{item.billType ? Utils.getBillTypeName(item.billType) : ''}} :
					</text>
					<text>
						{{item.billCode ? item.billCode : ''}}
					</text>
				</view>
				<view class="main_currentAccount_item_bom">
					<text class="main_currentAccount_item_bom_l">
						应收余额：{{item.saleShouldMoneyBalance ? Utils.formatToFixed(item.saleShouldMoneyBalance,'money') : 0}}
					</text>
					<text class="main_currentAccount_item_bom_r">
						{{item.billDate ? Utils.DateFormateTime(item.billDate,'nyr') : ''}}
					</text>
				</view>
			</view>

		</scroll-view>

		<!-- 日期选择 -->
		<u-datetime-picker :show="timeShow"
			v-model="value1"
			mode="date"
			@cancel='cancel'
			@confirm='sureConfirm'></u-datetime-picker>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import {
		listMallTransactionReconciliation
	} from '@/api/global.js'
	export default {
		computed: {
			...mapGetters(['demoTopHieght'])
		},
		data() {
			return {
				timer:null,
				time: '', //选择日期
				value1: Number(new Date()), //
				timeShow: false, //选择日期弹出层
				search: '',
				pageData: {
					currentPage: 1,
					pageSize: 10
				},
				lastPage: 0,
				accountList: [],
				finalbalance: 0, //往来余额

			};
		},
		onShow() {
			this.$nextTick(() => {
				//获取高度
				this.Utils.getDemoTopHeight('main_currentAccount')
			})
		},
		onLoad() {
			this.getList()
		},
		methods: {
			//获取列表
			async getList(type) {

				//获取customerId
				let customerId = uni.getStorageSync('visitorLoginInfo') ? JSON.parse(uni.getStorageSync(
					'visitorLoginInfo'))?.MallMember?.customerId : ''
				uni.showLoading()
				let res = await listMallTransactionReconciliation({
					startDate: this.time,
					endDate: this.time,
					search: this.search,
					settlementCostomerId: customerId,
					...this.pageData
				})
				if (res.code == 2000) {
					if (type === 1) {
						this.accountList = []
					}
					uni.hideLoading()
					console.log('getList', this.accountList)
					this.accountList = this.accountList.concat(res?.data?.info?.list || [])
					this.lastPage = res?.data?.info?.lastPage
					this.finalbalance = res?.data?.finalbalance || 0
				} else {
					this.Utils.toast(`${res.msg}`)
				}
			},
			//下拉加载
			scrolltolower() {
				this.pageData.currentPage++
				if (this.pageData.currentPage > this.lastPage) {
					return
				} else {
					this.getList()
				}
			},
			//点击日期选择
			selectTime() {
				this.timeShow = true
			},
			//日期取消
			cancel() {
				this.time = ''
				this.timeShow = false
				this.pageData.currentPage = 1
				this.accountList = []
				this.getList()
			},
			//日期确定
			sureConfirm(value) {
				console.log(value);
				this.time = this.Utils.DateFormateTime(value.value, 'nyr')
				this.timeShow = false
				this.pageData.currentPage = 1
				this.accountList = []
				this.getList()
			},
			//搜索
			searchBlur(val) {
				console.log(val);
				this.search = val
				this.accountList = []
				this.pageData.currentPage = 1
				this.getList(1)
			},
			nativeInput(e){
				this.search = e;
				clearTimeout(this.timer);
				this.timer = setTimeout(() => {
					this.getList(1);
				},1000)
			},
			//返回上一级
			navToBack() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss"
	scoped>
	.mian_currentAccount_top {
		width: 100%;
		height: 88rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.mian_currentAccount_top_l {
			font-size: $font_size_14;
			color: $text_color_333;
			font-weight: bold;
		}

		.mian_currentAccount_top_r {
			font-size: $font_size_12;
			color: $text_color_333;
			border-radius: 60rpx;
			background-color: #f2f2f2;
			padding: 10rpx 20rpx;

			image {
				width: 28rpx;
				height: 28rpx;
				vertical-align: middle;
			}
		}
	}

	.main_currentAccount {
		width: 100%;
		box-sizing: border-box;

		.main_currentAccount_item {
			width: 100%;
			box-sizing: border-box;
			border-bottom: 1px solid #f3f3f3;

			.main_currentAccount_item_top {
				font-size: $font_size_14;
				color: $text_color_333;
				font-weight: bold;

				image {
					width: 40rpx;
					height: 40rpx;
					vertical-align: middle;
				}
			}

			.main_currentAccount_item_bom {
				margin-top: 20rpx;
				display: flex;
				justify-content: space-between;
				font-size: $font_size_12;

				.main_currentAccount_item_bom_l {
					color: $text_color_333;
				}

				.main_currentAccount_item_bom_r {
					color: #999;
				}
			}
		}
	}
</style>